<script setup lang="ts">
import { PlusOutlined, SearchOutlined } from '@ant-design/icons-vue'
import { useVModel } from '@vueuse/core'

// 声明props
const props = defineProps({
	tip: { type: String, default: '' },
	keyword: { type: String, default: '' }
})

// 声明事件
const emit = defineEmits(['onSearch', 'update:keyword', 'onAdd'])
const mySearchKey = useVModel(props, 'keyword', emit)
const onSearch = () => {
	emit('onSearch', mySearchKey.value)
}
const onAdd = () => {
	emit('onAdd')
}
</script>

<template>
	<div class="common_search flex justify-between items-center px-2">
		<div class="pr-2">
			<a-input-group>
				<a-input v-model:value="mySearchKey" :placeholder="tip" @keyup.enter.native="onSearch" />
				<search-outlined @click="onSearch" />
			</a-input-group>
		</div>
		<a-button type="primary" @click="onAdd">
			<template #icon>
				<PlusOutlined />
			</template>
			新增
		</a-button>
	</div>
</template>


<style lang="less" scoped>
.common_search {
	:deep(.ant-input-group) {
		position: relative;

		.ant-input {
			border-radius: 6px;
			padding-right: 32px;
		}

		.anticon-search {
			font-size: 18px;
			position: absolute;
			right: 8px;
			top: 8px;
			z-index: 10;
		}
	}
}
</style>